<template>
  <div class="debug-bar">
    <div>debug bar</div>
    <el-button @click="handleClickUp"> Go UP </el-button>
    <el-input v-model="uri">
      <template #append>
        <el-button @click="handleClickGo">Go</el-button>
      </template>
    </el-input>
  </div>
</template>
    
<script>
import MHolderJS from "./model_holder";

export default {
  name: "files-debug-bar",

  computed: {
    model() {
      let vo = this.modelValue;
      return vo;
    },

    resultLocationURI() {
      let vo = this.modelValue;
      let h = MHolderJS.New(vo);
      return h.GetURI();
    },
  },

  data() {
    return {
      uri: "",
    };
  },

  methods: {
    handleClickGo() {
      let action = "navigate";
      let location = this.uri;
      this.$emit("action", { action, location });
    },

    handleClickUp() {
      let vo = this.modelValue;
      let h = MHolderJS.New(vo);

      let action = "navigate";
      let location = "./..";
      let wd = h.GetWD();
      let parent = h.GetSelf();
      this.$emit("action", { action, location, wd, parent });
    },
  },

  mounted() {},

  unmounted() {},

  props: {
    modelValue: Object,
  },

  watch: {
    resultLocationURI(value) {
      this.uri = value;
    },
  },
};
</script>

<style scoped>
.debug-bar {
  padding: 5px;
  background-color: yellow;
  border-width: 5px;
  border-color: rgb(40, 40, 40);
  border-style: solid;
}
</style>
